<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, onUnmounted, watch } from 'vue'

const chartRef = ref(null)
let myChart = null
let resizeObserver = null
onMounted(() => {
    if (chartRef.value) {
        myChart = echarts.init(chartRef.value)
        /**
         * ECharts 图表配置选项
         * 用于配置就业数据的横向柱状图，包含背景柱和实际数据柱
         */
        const option = {
            grid: {
                top: '10%',
                left: '3%',
                right: '10%',
                bottom: '3%',
                containLabel: true
            },
            /**
             * X 轴配置
             * 数值轴，用于表示百分比数据
             */
            xAxis: {
                show: false,
                type: 'value',
            },
            /**
             * Y 轴配置
             * 类目轴，显示星期几的分类
             */
            yAxis: {
                type: 'category',
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: {
                    color: '#fff'
                },
                data: ['NODE', 'VUE', 'JavaScript', 'CSS3', 'HTML5']
            },
            /**
             * 系列列表，每个系列通过 type 决定如何渲染
             * 这里包含两个柱状图系列：背景柱和数据柱
             */
            series: [
                {
                    /**
                     * 背景柱系列
                     * 用于显示每个类目的背景，所有值都为 100，表示 100% 的宽度
                     */
                    barWidth: 15,
                    data: [100, 100, 100, 100, 100, 100, 100],
                    type: 'bar',
                    label: {
                        show: false,
                    },
                    /**
                     * 柱子样式配置
                     * 设置颜色、圆角和透明度，使背景柱呈现半透明灰色效果
                     */
                    itemStyle: {
                        color: 'transparent',
                        barBorderRadius: [6, 6, 6, 6],
                        opacity: 0.3,
                        borderColor: '#00d4f4'
                    },
                    // 不同系列的柱间距离，柱子重叠，可以设置 barGap 为 '-100%';
                    barGap: "-92%",
                },
                {
                    /**
                     * 数据柱系列
                     * 显示实际的就业数据百分比
                     */
                    barWidth: 12,
                    data: [
                        { value: 69, num: 702 }, // node
                        { value: 78, num: 350 }, // vue
                        { value: 60, num: 610 }, // javascript
                        { value: 34, num: 793 }, // css3
                        { value: 69, num: 664 }, // html5
                    ],
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'insideRight',
                        textStyle: {
                            color: '#fff'
                        },
                        formatter: function (params) {
                            return params.value + '%'; // 直接返回 value 值加上百分号
                        },
                    },
                    itemStyle: {
                        barBorderRadius: [10, 10, 10, 10],
                        color: function (params) {
                            let colorList = ['#8b78f6', '#f8b448', '#56d0e3', '#f57474', '#1089e7'];
                            return colorList[params.dataIndex];
                        }
                    }
                }]
        };
        myChart.setOption({
            ...option,
            graphic: {
                elements: option.series[1].data.map((item, index) => ({
                    type: 'text',
                    left: '95%',
                    top: `${(index * 16 + 16)}%`,
                    style: {
                        text: item.num,
                        fill: '#fff',
                        fontSize: 12,
                    }
                }))
            }
        });
        if (window.ResizeObserver) {
            resizeObserver = new ResizeObserver(() => {
                myChart.resize()
            })
            resizeObserver.observe(chartRef.value)
        } else {
            window.addEventListener('resize', handleResize)
        }
    }
})
// 处理窗口大小变化
const handleResize = () => {
    if (myChart) {
        myChart.resize({
            animation: {
                duration: 300
            }
        })
    }
}

// 组件卸载时清理事件监听器
onUnmounted(() => {
    if (resizeObserver && chartRef.value) {
        resizeObserver.unobserve(chartRef.value)
        resizeObserver = null
    }

    window.removeEventListener('resize', handleResize)

    if (myChart) {
        myChart.dispose()
    }
})
</script>

<template>
    <div ref="chartRef" style="width: 100%; height: 240px;"></div>
</template>

<style lang="scss" scoped></style>
